<template>
  <div class="all-page">
    <!-- 返回按钮 -->
    <el-button type="primary" class="back-button" @click="back"
      >返回上级页面</el-button
    >

    <!-- 隐蔽工程检查验收记录 -->
    <div class="page">
      <div class="document-header">
        <h1 class="document-title">隐蔽工程检查验收记录</h1>
      </div>
      <!-- 基本信息部分 - 在表格上方 -->
      <div>
        <div class="info-row">
          <span class="label">单位(子单位)工程名称:</span>
          <span class="value kai-font">中建大厦综合楼</span>
          <span class="label">验收日期:</span>
          <span class="value kai-font">2020年×月×日</span>
          <span class="label">编号:</span>
          <span class="value kai-font">001</span>
        </div>
      </div>
      <table class="main-table">
        <!-- 分项工程信息 -->
        <tr>
          <td class="label-cell">分项工程名称</td>
          <td class="value-cell">钢筋分项工程</td>
          <td class="label-cell">隐蔽日期</td>
          <td class="value-cell">2020年×月×日</td>
        </tr>
        <tr>
          <td class="label-cell">隐蔽项目</td>
          <td class="value-cell">钢筋</td>
          <td class="label-cell">隐蔽部位</td>
          <td class="value-cell">
            1-8/A-H轴一层剪力墙、柱及电梯井(+0.500m~3.820m)
          </td>
        </tr>

        <!-- 隐蔽依据 -->
        <tr>
          <td class="content-cell" colspan="6">
            <div class="content-item">
              <strong>隐蔽依据:</strong> 施工图图号<span
                class="special-underline kai-font"
                >结施-01、03</span
              >，设计变更/洽商/技术核定单（编号<span
                class="special-underline kai-font"
                >/</span
              >）及有关国家现行标准等。
            </div>
            <div class="content-item">
              <strong>主要材料名称:</strong>
              <span class="special-underline kai-font">钢筋</span>
              <span class="blank-box" />
              <strong>规格、型号:</strong>
              <span class="special-underline kai-font"
                >HBR400E 18mm、20mm、22mm、25mm</span
              >
            </div>
          </td>
        </tr>

        <!-- 隐蔽内容 -->
        <tr>
          <td class="content-cell" colspan="6">
            <div class="content-item"><strong>隐蔽内容:</strong></div>
            <div class="content-item kai-font">
              1. 依据结施-01、03施工,无变更;
            </div>
            <div class="content-item kai-font">
              2. 钢筋质量证明书及进场验收记录齐全,复试合格,报告编号为***;
            </div>
            <div class="content-item kai-font">
              3. 墙柱的受力筋均为HRB400E
              规格分别为18mm、20mm、22mm、25mm;数量和位置均符合设计要求,纵向受力筋锚固长度符合设计及规范要求,接头留置位置正确;
            </div>
            <div class="content-item kai-font">
              4. 墙柱箍筋采用HPB300直径为8mm,弯钩角度为135度平直段长度为80mm;
            </div>
            <div class="content-item kai-font">
              5. HBR400E
              18mm、20mm、22mm、25mm钢筋接长采用机械连接,试验合格(报告编号:***)和绑扎搭接,接头相互错开,同一截面直螺纹接头为50%;
            </div>
            <div class="content-item kai-font">
              6. 墙钢筋保护层50mm,柱25mm,采用塑料卡子,间距1000mm,梅花形布置;
            </div>
            <div class="content-item kai-font">
              7. 主筋和箍筋均表面无锈蚀和油污,钢筋绑扎牢固。
            </div>
            <div class="content-item">隐蔽内容已经做完,请予以检查。</div>
          </td>
        </tr>

        <!-- 检查结论 -->
        <tr>
          <td class="content-cell" colspan="6">
            <div class="content-item"><strong>检查结论:</strong></div>
            <div class="checkbox-group">
              <label class="checkbox-item">
                <input type="checkbox" checked disabled />
                <span>同意隐蔽</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" disabled />
                <span>不同意隐蔽,修改后复查</span>
              </label>
            </div>
          </td>
        </tr>

        <!-- 复查结论 -->
        <tr>
          <td class="content-cell" colspan="6">
            <div class="content-item">
              <div><strong>复查结论:</strong></div>
              <div class="indent-font kai-font">XXX</div>
              <div class="content-item" style="margin: 0.5rem 0 0 25rem">
                <strong>复查人:</strong>
                <span class="special-underline">XXX</span>
                <span class="signature-date" style="float: right"
                  >复查日期:2025年*月*日</span
                >
              </div>
            </div>
          </td>
        </tr>

        <!-- 施工单位 -->
        <tr>
          <td class="content-cell" colspan="6">
            <div><strong>施工单位</strong></div>
            <div class="signature-group">
              <div class="signature-item">
                <span class="signature-label">项目专业工长签字:</span>
                <span class="special-underline">邓兵</span>
                <span class="signature-date">2025年*月*日</span>
              </div>
              <div class="signature-item">
                <span class="signature-label">项目专业质量检查员签字:</span>
                <span class="special-underline">李飞</span>
                <span class="signature-date">2025年*月*日</span>
              </div>
              <div class="signature-item">
                <span class="signature-label">专业技术负责人签字:</span>
                <span class="special-underline">张帅</span>
                <span class="signature-date">2025年*月*日</span>
              </div>
            </div>
          </td>
        </tr>

        <!-- 监理单位验收结论 -->
        <tr>
          <td class="content-cell" colspan="6">
            <div class="content-item">
              <div><strong>监理(建设)单位验收结论:</strong></div>
              <div class="indent-font kai-font">
                经检查符合设计及规范要求,同意隐蔽。
              </div>
              <div class="content-item" style="margin: 0.5rem 0 0">
                <strong
                  >监理(建设)项目部(章)专业监理工程师(建设单位项目技术负责人)签字:</strong
                >
                <span class="special-underline">XXX</span>
                <span class="signature-date" style="float: right"
                  >2025年*月*日</span
                >
              </div>
            </div>
          </td>
        </tr>

        <!-- 设计技术交底会议 -->
        <tr>
          <td class="content-cell" colspan="6">
            设计技术交底会议等列入须经设计人员参与隐蔽验收的部位签证
          </td>
        </tr>

        <!-- 设计单位参加验收人意见 -->
        <tr>
          <td class="content-cell" colspan="6">
            <div class="content-item">
              <div><strong>设计单位参加验收人意见:</strong></div>
              <div class="indent-font kai-font">XXX</div>
              <div class="content-item" style="margin: 0.5rem 0 0 25rem">
                <strong>验收人签名:</strong>
                <span class="special-underline">XXX</span>
                <span class="signature-date" style="float: right"
                  >2025年*月*日</span
                >
              </div>
            </div>
          </td>
        </tr>
      </table>
      <!-- 注部分 -->
      <div class="section">
        <div class="content">
          <div class="content-item">
            注:1.本记录由施工项目专业质量检查员填写,监理工程师(建设单位项目技术负责人)组织项目专业技术负责人等进行验收。2.记录时,应首先说明是否按设计图号施工,如有设计变更,应立即在备用竣工图上用红色标注变更内容或绘制变更补充图:无论是否有设计变更,监理(建设)单位现场监督员必须在备用竣工图上签字认可后,方可办理该部位隐蔽验收手续。3.隐蔽验收时,必须严格按照国家建筑工程质量验收标准的主控项目和一般项目进行检查,凡不符合要求的项目,必须整改达标后,方可办理隐蔽验收手续。4.检查评定结论必须用规范用语,对主控项目、一般项目,特别是结构构造措施,必须如实可靠地填写结果或结论。5.隐蔽部位现场照片应按隐蔽内容拍摄,并附在本记录后。6.检验批、隐蔽验收质量责任人现场表现照片、工序质量责任标识牌应符合湘建建(2018)135号文附件1-3要求。7.隐蔽工程主要内容请参照隐蔽工程填写说明页。
          </div>
        </div>
      </div>
    </div>
    <!-- 建设工程现场隐蔽和变更情况照片帖页 -->
    <div class="page">
      <div class="document-header">
        <h1 class="document-title">建设工程现场隐蔽和变更情况照片帖页</h1>
      </div>
      <!-- 基本信息部分 - 在表格上方 -->
      <div>
        <div class="info-row">
          <span class="label">单位(子单位)工程名称:</span>
          <span class="value kai-font">中建大厦综合楼</span>
        </div>
      </div>
      <table class="main-table">
        <!-- 图片 -->
        <tr>
          <td colspan="4">
            <img class="table-img" src="../../../assets/test1.png" />
          </td>
        </tr>

        <!-- 图片信息 -->
        <tr>
          <td class="content-cell" colspan="4">
            <div class="content-item">
              <span class="blank-box" />
              <strong>拍摄时间:</strong>
              <span class="special-underline kai-font">2025年X月X日</span>
              <span class="blank-box" />
              <strong>工程隐蔽/变更部位:</strong>
              <span class="special-underline kai-font">1-8/A-H轴二层梁</span>
              <span class="blank-box" />
              <strong>编号:</strong>
              <span class="special-underline kai-font"
                >001 照片（隐蔽 项目）</span
              >
              <span class="blank-box" />
              <strong>内容:</strong>
              <span class="special-underline kai-font">钢筋安装</span>
            </div>
          </td>
        </tr>

        <!-- 图片 -->
        <tr>
          <td colspan="4">
            <img class="table-img" src="../../../assets/test2.png" />
          </td>
        </tr>

        <!-- 图片信息 -->
        <tr>
          <td class="content-cell" colspan="4">
            <div class="content-item">
              <span class="blank-box" />
              <strong>拍摄时间:</strong>
              <span class="special-underline kai-font">2025年X月X日</span>
              <span class="blank-box" />
              <strong>工程隐蔽/变更部位:</strong>
              <span class="special-underline kai-font">1-8/A-H轴二层梁</span>
              <span class="blank-box" />
              <strong>编号:</strong>
              <span class="special-underline kai-font"
                >001 照片（隐蔽 项目）</span
              >
              <span class="blank-box" />
              <strong>内容:</strong>
              <span class="special-underline kai-font">钢筋安装</span>
            </div>
          </td>
        </tr>
        <!-- 签字 -->
        <tr>
          <td class="cell">项目技术负责人签字</td>
          <td class="cell">项目专业质量检查员签字</td>
          <td class="cell">专业监理工程师（建设单位项 目技术负责人）签字</td>
          <td class="cell">照片拍摄者签字</td>
        </tr>
        <tr>
          <td class="cell">张帅</td>
          <td class="cell">李飞</td>
          <td class="cell">李华</td>
          <td class="cell">邓兵</td>
        </tr>
      </table>
      <!-- 注部分 -->
      <div class="section">
        <div class="content">
          <div class="content-item">
            注：1.该记录山施工项目专业质量检查员填写，监理工程师（建设单位项目技术负责人）组织项目专业技术负责人等进行验收。2.记录时应首先说明是否按设计图号施工，如有设计变更应立即在备用竣工图纸上用红色文字注明变更情况或绘制变更补充图；凡有、无设计变更，监理（建设）单位的旁站监督人均应在备用竣工图上签字认可后，才能办理该部位隐蔽验收手续。3.隐蔽验收时，必须严格按国家施工质量验收规范的主控项目，一般项目的内容要求全数检查，凡有不合格处必须整改达到合格后才能办理隐蔽验收手续。4.检查评定结论必须语言规范，并针对主控项目、一般项目，特别是结构构造措施的内容要求，填写真实可靠的结果或结论。5.隐蔽部位要按隐蔽内容拍摄现场照片作为该记录附件。6.检验批、隐蔽验收质量责任人现场履职照片，过程质量责任标识牌按湘建建(2018)135号文件附件1—3要求。7.隐蔽工程主要内容详见隐蔽工程填写说明页。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";

export default {
  data() {
    return {
      loading: true, // 这是一个加载标识
      reportData: {}, // 这是报表数据接收变量
      localStorageId: "", // 用于存储id
      taskId: "",
    };
  },
  async mounted() {
    const localStorageId = this.$route.query.localStorageId;
    this.localStorageId = localStorageId; // 保存id用于销毁时清理
    if (localStorageId) {
      const data = localStorage.getItem(localStorageId);
      if (data) {
        this.reportData = JSON.parse(data);
        this.taskId = this.reportData.taskId;
        console.log(this.reportData);
        console.log("taskId为:" + this.taskId);
      }
    }
  },
  beforeDestroy() {
    // 这个钩子函数用来退出的时候清除本地存储的数据 防止数据堆积在浏览器里
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId);
    }
    document
      .querySelector("body")
      .setAttribute("style", "background-color: white;"); // 还原，因为这是个全局样式
  },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f5f5f5;"); // 设置对比色
  },
  methods: {
    back() {
      router.push({ path: "/menus/statement" });
    },
  },
};
</script>

<style scoped>
.all-page {
  width: 100%;
  padding-bottom: 5%;
}

/* 返回按钮样式 */
.back-button {
  position: fixed;
  top: 1.5rem;
  left: 6.25rem;
  z-index: 1000;
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.back-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.page {
  font-family: "Times New Roman", "宋体", sans-serif;
  padding: 4% 4% 0;
  width: 60%;
  aspect-ratio: 1 / 1.414;
  margin: 5% auto;
  background-color: white;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  line-height: 1.25rem;
}

.document-header {
  text-align: center;
  margin-bottom: 5%;
}

.document-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  padding: 2% 0;
}

.info-row {
  padding-left: 2%;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  align-items: center;
}

.label {
  font-weight: bold;
  white-space: nowrap;
}

.value {
  margin-right: 3%;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.blank-box {
  display: inline-block;
  width: 3rem;
}

/* 部分文字的下划线 */
.special-underline {
  border-bottom: 0.0938rem solid #333;
  padding: 0 1rem 0.125rem;
  border-radius: 0.0625rem;
}

.kai-font {
  font-family: "Times New Roman", "楷体", "KaiTi", "STKaiti", sans-serif;
  font-size: 0.9375rem;
}

.indent-font {
  text-indent: 2rem;
}

.main-table {
  width: 100%;
  border-collapse: collapse;
  border: 0.18rem solid #000;
}

.main-table td {
  border: 0.1rem solid #000;
  padding: 1.5%;
  text-align: center;
  vertical-align: middle;
}

.label-cell {
  font-weight: bold;
  width: 17%;
  text-align: center;
}

.value-cell {
  width: 30%;
  text-align: left;
}

.content-cell {
  text-align: left;
  background-color: white;
}

.section {
  font-size: 0.9375rem;
}

.section .content {
  margin: 1% 0 0;
}

.content-item {
  text-indent: 0;
  text-align: left;
}

.checkbox-group {
  display: flex;
  gap: 5%;
  margin-left: 3%;
}

.checkbox-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
}

.signature-group {
  margin-left: 3%;
}

.signature-item {
  display: flex;
  align-items: center;
  margin-bottom: 1%;
  gap: 2%;
}

.signature-label {
  font-weight: bold;
  white-space: nowrap;
}

.signature-name {
  min-width: 8rem;
  padding-bottom: 0.2%;
}

.signature-date {
  margin-left: auto;
  color: #666;
}

.cell {
  width: 25%;
}

.table-img {
  width: 90%;
  align-items: center;
}
</style>
